<template>
	<view>
		<u-popup
			:show="show"
			mode="bottom"
			@close="close"
			@open="open"
			closeable>
			<view class="padding-xs">
				<view class="bg-white">
					<view class="text-center text-xl text-black margin-bottom">请选择项目</view>
					<view class="project-list bg-white radius-xl">
						<view class="item radius-lg padding-xs padding-tb solid-bottom" v-for="(item,index) in list" :key="index">
							<image :src="item.image.preview_url" mode="aspectFill" class="img" v-if="item.image"></image>
							<view class="probox">
								<view class="title text-bold text-black">
									<text>{{item.name}}</text>
									<view class="text-sm text-right cost text-red">
										<text class="text-bold">¥</text>
										<text class="text-lg text-bold">{{item.money}}</text>
									</view>
								</view>
								<view class="text-gray text-sm margin-bottom-xs">{{item.desc}}</view>
								<view class="price flex flex-wrap">
									<view class="time basis-sm text-sm">
										<text class="cuIcon-timefill text-lg themeColor"></text>
										<text class="padding-left-mn">{{item.serve_hours}}分钟</text>
									</view>
									<view class="basis-lg text-right liji">
										<u-number-box
											button-size="20"
											v-model="item.num"
											@change="valChange"
											min="0"
											:name="index"
											style="float: right;">
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="total crow solid-top padding-top-sm">
						<view class="">
							合计	:
							<text class="text-red">￥</text>
							<text class="text-xl text-red text-bold">{{form.pay_price}}</text>
						</view>
						<view class="submit">
							<button class="cu-btn round china-btn-bg" @click="submit()">
								<text class="padding-lr">提交</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<payType
			:show="payTypeShow"
			:cost="form.pay_price"
			@payCallBack="payCallBack"
			:referParams="form"
			source='orderAdd'
			v-if="payTypeShow"/>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			orderId: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				payTypeShow:false,
				form:{
					pay_price:0,
					project:[],
				},
				list:[],
				current_page:1,
			};
		},
		created() {
			// this.getProject();
		},
		methods:{
			getProject(){
				let self = this;
			},
			valChange(e){
				this.list[e.name].num = e.value;
				this.computationalCost();
			},
			computationalCost(){
				let project = this.list;
				let cost = 0;
				for(let i = 0; i < project.length; i++) {
					if(project[i].num > 0){
						cost += project[i].money * project[i].num;
					}
				}
				this.form.pay_price = cost.toFixed(2);
			},
			submit(){
				let project = this.list;
				let array = new Array();
				for(let i = 0; i < project.length; i++) {
					if(project[i].num > 0){
						array = array.concat({num:project[i].num,project_id:project[i].project_id})
					}
				}
				if(array.length <= 0){
					uni.showToast({
						title:'请选择项目',icon:'none'
					})
					return;
				}
				this.form.project = JSON.stringify(array);
				this.form.orderId = this.orderId;
				this.payTypeShow = true;
			},
			payCallBack(e){
				this.payTypeShow = false;
				this.close();
			},
			close(){
				this.$emit('addOrderPopup',{type:'close'})
			},
			open(){},
		}
	}
</script>

<style lang="less" scoped>
.project-list{
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		height: 160upx;
		.img{
			width: 110upx;
			height: 110upx;
			border-radius: 10upx;
		}
		.probox{
			width: 80%;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				.cost{
					width: 125upx;
				}
			}
		}
	}
}
.crow{
	justify-content: space-between;
}
</style>
